<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <canvas id="canvas" width="1024" height="1024"></canvas>
  </body>
  <script>
    window.onload = function () {
      var canvas = document.querySelector("#canvas");
      var ctx = canvas.getContext("2d");
      // 开始绘制路径
      ctx.beginPath();
      // 绘制圆形(x,y,半径,起始位置，结束弧度,圆，正反)
      ctx.arc(100, 100, 50, 0, Math.PI * 2, true);

      //   （x,y）
      ctx.moveTo(130, 100);
      //   绘制嘴巴(x,y,半径,起始位置，半圆，正反)
      ctx.arc(100, 100, 30, 0, Math.PI , false);
      //   （x,y）
      ctx.moveTo(90, 100);
      //   绘制左眼
      ctx.arc(90, 100, 10, 0, Math.PI * 2, true);
      ctx.moveTo(100, 90);
      //   绘画眉毛
      ctx.arc(90, 90, 10, 0, Math.PI, true);
      ctx.moveTo(120, 90);
      //   绘画眉毛
      ctx.arc(110, 90, 10, 0, Math.PI, true);
      //   （x,y）

      ctx.moveTo(110, 100);

      //   绘制右眼b
      ctx.arc(110, 100, 10, 0, Math.PI * 2, true);
      //   绘制鼻子
      ctx.fillRect(95, 110, 8, 15);
      ctx.stroke();
    };
  </script>
</html>
